<template>
  <div class="product-management">
    <h2 class="text-2xl font-bold mb-4">商品管理</h2>
    <a-row :gutter="16" class="mb-4">
      <a-col :xs="24" :sm="12" :md="8" :lg="6">
        <a-input-search
            v-model:value="searchValue"
            placeholder="搜索商品"
            @search="onSearch"
            class="w-full"
        />
      </a-col>
      <a-col :xs="24" :sm="12" :md="8" :lg="6" class="mt-2 sm:mt-0">
        <a-select
            v-model:value="filterStatus"
            style="width: 100%"
            @change="handleFilterChange"
            placeholder="选择审核状态"
        >
          <a-select-option value="">全部状态</a-select-option>
          <a-select-option value="pending">待审核</a-select-option>
          <a-select-option value="approved">已通过</a-select-option>
          <a-select-option value="rejected">已拒绝</a-select-option>
        </a-select>
      </a-col>
    </a-row>
    <a-table
        :columns="columns"
        :data-source="filteredData"
        :pagination=pagination
        class="bg-white rounded-lg shadow-md"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-space>
            <a @click="viewProductDetails(record)">查看详情</a>
            <a-select
                v-model:value="record.status"
                style="width: 120px"
                @change="(value) => updateProductStatus(record.key, value)"
            >
              <a-select-option value="pending">待审核</a-select-option>
              <a-select-option value="approved">通过</a-select-option>
              <a-select-option value="rejected">拒绝</a-select-option>
            </a-select>
          </a-space>
        </template>
      </template>
    </a-table>
    <a-modal
        v-model:visible="modalVisible"
        title="商品详情"
        @ok="handleModalOk"
        width="700px"
        class="product-modal"
    >
      <a-descriptions bordered :column="1">
        <a-descriptions-item label="商品名称">{{ selectedProduct.name }}</a-descriptions-item>
        <a-descriptions-item label="价格">¥{{ selectedProduct.price }}</a-descriptions-item>
        <a-descriptions-item label="库存">{{ selectedProduct.stock }}</a-descriptions-item>
        <a-descriptions-item label="类别">{{ selectedProduct.category }}</a-descriptions-item>
        <a-descriptions-item label="描述">{{ selectedProduct.description }}</a-descriptions-item>
        <a-descriptions-item label="图片">
          <img :src="selectedProduct.image" alt="商品图片" class="max-w-full h-auto" />
        </a-descriptions-item>
        <a-descriptions-item label="审核状态">
          <a-tag :color="getStatusColor(selectedProduct.status)">
            {{ getStatusText(selectedProduct.status) }}
          </a-tag>
        </a-descriptions-item>
      </a-descriptions>
      <div class="mt-4">
        <a-radio-group v-model:value="reviewAction" button-style="solid">
          <a-radio-button value="approved">通过</a-radio-button>
          <a-radio-button value="rejected">拒绝</a-radio-button>
        </a-radio-group>
      </div>
      <a-input
          v-if="reviewAction === 'rejected'"
          v-model:value="rejectReason"
          placeholder="请输入拒绝原因"
          class="mt-2"
      />
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, computed, h } from 'vue';
import { message, Tag } from 'ant-design-vue';

const searchValue = ref('');
const filterStatus = ref('');
const modalVisible = ref(false);
const selectedProduct = ref({});
const reviewAction = ref('');
const rejectReason = ref('');

const columns = [
  {
    title: '商品名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '价格',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '库存',
    dataIndex: 'stock',
    key: 'stock',
  },
  {
    title: '类别',
    dataIndex: 'category',
    key: 'category',
  },
  {
    title: '审核状态',
    dataIndex: 'status',
    key: 'status',
    customRender: ({ text }) => {
      const color = text === 'approved' ? 'green' : (text === 'rejected' ? 'red' : 'gold');
      return h(Tag, { color }, () => getStatusText(text));
    },
  },
  {
    title: '操作',
    key: 'action',
  },
];

const data = ref([
  {
    key: '1',
    name: 'iPhone 12',
    price: 5999,
    stock: 100,
    category: '电子产品',
    status: 'pending',
    description: '最新款iPhone，搭载A14仿生芯片',
    image: 'https://example.com/iphone12.jpg',
  },
  {
    key: '2',
    name: 'T恤',
    price: 99,
    stock: 500,
    category: '服装',
    status: 'approved',
    description: '纯棉圆领T恤，多色可选',
    image: 'https://example.com/tshirt.jpg',
  },
  {
    key: '3',
    name: '笔记本电脑',
    price: 4999,
    stock: 50,
    category: '电子产品',
    status: 'pending',
    description: '高性能笔记本电脑,适合办公和娱乐',
    image: 'https://example.com/laptop.jpg',
  },
  {
    key: '4',
    name: '运动鞋',
    price: 299,
    stock: 200,
    category: '鞋类',
    status: 'approved',
    description: '舒适透气的运动鞋,适合日常运动',
    image: 'https://example.com/shoes.jpg',
  },
  {
    key: '5',
    name: '智能手表',
    price: 1299,
    stock: 80,
    category: '电子产品',
    status: 'rejected',
    description: '多功能智能手表,支持心率监测和运动追踪',
    image: 'https://example.com/smartwatch.jpg',
  },
]);

const pagination = ref({
  total: computed(() => filteredData.value.length),
  current: 1,
  pageSize: 10,
});


const onSearch = (value) => {
  searchValue.value = value;
  pagination.value.current = 1;
};

const handleFilterChange = (value) => {
  console.log('筛选状态:', value);
  filterStatus.value = value;
  pagination.value.current = 1;
};

const filteredData = computed(() => {
  let result = data.value;
  if (filterStatus.value) {
    result = result.filter(item => item.status === filterStatus.value);
  }
  if (searchValue.value) {
    result = result.filter(item =>
        item.name.toLowerCase().includes(searchValue.value.toLowerCase()) ||
        item.category.toLowerCase().includes(searchValue.value.toLowerCase())
    );
  }
  return result;
});

const viewProductDetails = (record) => {
  selectedProduct.value = record;
  reviewAction.value = record.status;
  rejectReason.value = '';
  modalVisible.value = true;
};

const updateProductStatus = (key, value) => {
  const index = data.value.findIndex(item => item.key === key);
  if (index !== -1) {
    data.value[index].status = value;
    message.success(`商品状态已更新为${getStatusText(value)}`);
  }
};

const handleModalOk = () => {
  if (reviewAction.value === 'rejected' && !rejectReason.value) {
    message.error('请输入拒绝原因');
    return;
  }

  selectedProduct.value.status = reviewAction.value;
  updateProductStatus(selectedProduct.value.key, reviewAction.value);

  if (reviewAction.value === 'rejected') {
    console.log('拒绝原因:', rejectReason.value);
    // 这里可以添加将拒绝原因保存到后端的逻辑
  }

  modalVisible.value = false;
};

const getStatusText = (status) => {
  const statusMap = {
    pending: '待审核',
    approved: '已通过',
    rejected: '已拒绝'
  };
  return statusMap[status] || status;
};

const getStatusColor = (status) => {
  const colorMap = {
    pending: 'gold',
    approved: 'green',
    rejected: 'red'
  };
  return colorMap[status] || 'default';
};
</script>

<style scoped>
.product-management {
  padding: 24px;
}

.mb-4 {
  margin-bottom: 16px;
}

.product-modal :deep(.ant-modal-content) {
  border-radius: 8px;
}

.product-modal :deep(.ant-modal-header) {
  border-radius: 8px 8px 0 0;
}

.product-modal :deep(.ant-descriptions-view) {
  border-radius: 8px;
}
</style>

